<template>
  <div class="box">
    <h1>grid 布局</h1>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.box {
   width: 500px;
   margin: 0 auto;
   h1 {
      text-align: center;
      padding: 10px;
    }
  .container {
    display: grid;
    grid-template-rows: repeat(3, 200px);
    grid-template-columns: repeat(3, 200px);
    gap: 10px;
    .item {
      // background-color: pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @for $i from 1 through 9 {
    .item:nth-child(#{$i}) {
        background-color: rgb(random(255), random(255), random(255));
      }
    }
  }
}

</style>